<template>
  <div class="feedback-page">
    <van-nav-bar
      title="意见反馈"
      left-text="返回"
      left-arrow
      @click-left="router.back()"
    />

    <van-form @submit="handleSubmit">
      <van-cell-group inset>
        <van-field
          v-model="form.content"
          rows="5"
          autosize
          type="textarea"
          maxlength="500"
          placeholder="请输入您的宝贵意见或建议（500字以内）"
          show-word-limit
          :rules="[{ required: true, message: '请填写反馈内容' }]"
        />
        <van-field
          v-model="form.contact"
          label="联系方式"
          placeholder="手机/邮箱（选填）"
        />
      </van-cell-group>

      <div style="margin: 16px;">
        <van-button 
          round 
          block 
          type="primary" 
          native-type="submit"
          :loading="isSubmitting"
        >
          提交反馈
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showSuccessToast, showFailToast } from 'vant'

const router = useRouter()

const form = ref({
  content: '',
  contact: ''
})

const isSubmitting = ref(false)

const handleSubmit = async () => {
  try {
    isSubmitting.value = true
    
    // TODO: 替换为真实API调用
    // 实际API路径: /api/feedback/submit
    // 请求方法: POST
    // 请求参数示例:
    // {
    //   content: "反馈内容",
    //   contact: "联系方式",
    //   userId: "当前用户ID", // 需从userStore获取
    //   timestamp: "提交时间" // 需自动生成
    // }
    // await feedbackApi.submit(form.value)
    
    showSuccessToast('反馈提交成功')
    setTimeout(() => {
      router.back()
    }, 1500)
  } catch (error) {
    showFailToast('提交失败，请稍后重试')
    console.error('反馈提交失败:', error)
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
.feedback-page {
  padding-bottom: 20px;
  min-height: 100vh;
  background-color: #f7f8fa;
}
</style>
